<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>撤销转账</title>
    <style>
        .input-val {
            width: 200px;
            height: 32px;
            border: 1px solid #ddd;
            box-sizing: border-box;
        }
        #canvas {
            vertical-align: middle;
            box-sizing: border-box;
            border: 1px solid #ddd;
            cursor: pointer;
        }
        .btn {
            display: block;
            margin-top: 20px;
            height: 32px;
            width: 100px;
            font-size: 16px;
            color: #fff;
            background-color: #457adb;
            border: none;
            border-radius: 50px;
        }
    </style>

    <!--1.引入bootstrap样式框架；-->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">

    <!--2.引入angularJS分页样式的框架；-->
    <link rel="stylesheet" href="../angularjs/pagination.css">

    <link rel="stylesheet" href="../layer/theme/default/layer.css">

    <!--3.引入bootstrap中的Jquery框架；-->
    <script src="../bootstrap/js/jquery.min.js"></script>
    <!--4.引入bootstrap中的Js框架；-->
    <script src="../bootstrap/js/bootstrap.min.js"></script>

    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular-route.js"></script>

    <!--<script src="//unpkg.com/angular-ui-router@0.4.2/release/angular-ui-router.js"></script>-->
    <!--6.引入AngularJS分布的JS框架-->
    <script src="../angularjs/pagination.js"></script>

    <script src="../layer/layer.js"></script>

    <script src="../js/mycode.js" ></script>

</head>
<body ng-app="anApp"    ng-controller="anCtrl">
<div class="" style="width: 100%">

    <div class="panel panel-primary">

        <div style="text-align: center">
            <h1>延期汇款撤销处理</h1>

        </div>

        <div class="panel-body">
            <div class="col-md-9 col-md-offset-1">
                <form  >

                        <div class="form-horizontal">
                            <label for="payerAccount" class="control-label col-md-2">交易银行卡号</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input name="payerAccount" id="payerAccount"  ng-model="form.payerAccount" class="form-control" placeholder="请输入需要撤销转账的银行卡号" maxlength="30"
                                       type="text"/><span id="sfz2"></span>
                            </div>

                        <br>
                        <div class="form-group">
                            <div class="form-group">
                                <input class="btn btn-danger col-sm-offset-2 col-md-9" id="submit"   value="确认撤销" type="button">
                            </div>
                            <div class="form-group">
                                <a class="btn btn-primary col-sm-offset-2 col-md-9" id="submit1"
                                   type="button">取消</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="panel-footer text-right">
            境内转账
        </div>

    </div>

</div>

<script>
    layerindex=-1;
    var app = angular.module('anApp',['pagination']);    //定义一个模块； cityApp

    app.controller("anCtrl",function ($scope, $http) {    //定义一个控制器； cityCtrl  ,  $http 调用接口！  http://localhost:8080/citys/list.action
        $scope.id=0;

        $scope.form={
            //付款人
            payerAccount:""
        }
        var sessionStorage = window.sessionStorage;

        //zuul
        $http.post('http://localhost:12000/tran/ip').then(function (data) {  //正确请求成功时处理
            console.log(data)
            if (data.data.code == 403) {
                window.location.href = "/login.html";
            }
        }).catch(function (result) { //捕捉错误处理
            console.info(result);
        });
        $scope.annul=function () {

            $http.post('http://localhost:12000/tran/transfer/annul', $scope.form.payerAccount).success(function (data) {  //正确请求成功时处理
                console.log(data);
                layer.close(layerindex);
                layer.msg("撤销成功",{icon:6,title:"系统提示："});

                alert(data.msg)
                window.location.href="/index.html";
            })
        }

    });

    $(function () {
        $('#submit').click( function () {
            var s5 =$("#payerAccount").val();
            if(s5==""){
                alert("账户信息未填写，请填写！")
            }else {
                $('#myModal').modal('show')
            }
        })
        $('#b2').click( function () {
            $('#myModal').modal('hide')
        })

    });
</script>


<!-- 按钮触发模态框 -->

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">撤销转账确认</h4>
            </div>
            <div class="modal-body">
                <div style="text-align: center;color: red;"><h2>请确认撤销转账吗？</h2></div>
                <div class="panel-body">
                    <div class="col-md-9 col-md-offset-1">
                        <div class="form-group">
                            <div class="form-group">
                                <a class="btn btn-danger col-sm-offset-2 col-md-4" id="b1"
                                   ng-click="annul()" value=""data-toggle="modal" data-target="#myModal" type="submit" >确认</a>
                            </div>
                            <div class="form-group">
                                <a class="btn btn-warning col-sm-offset-2 col-md-4" id="b2"
                                   href="" type="button" data-dismiss="modal">取消</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
</html>